<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-image: url(./蔡徐坤.jpg);
            background-size: 100%;
        }
        .da{
            width: 800px;
            height: 600px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
        }
        .sjh{
            color: #ed9b43;
        }
        textarea{
            width: 800px;
            height: 200px;
            resize: none;
        }
        .fb{
            float: left;
            margin-top: 10px;
            width: 100px;
            height: 30px;
            color: #fff;
            background-color: #ed9b43;
            border: 1px transparent solid;
            border-radius: 5px;
        }
        .p{
            float: right;
            margin-top: 10px;
            color: #e6c255;
        }
        .zs{
            font-size: 18px;
            color: red;
        }
        li{
            width: 800px;
            float: left;
            list-style: none;
            border-bottom: 2px dotted black;
        }
        .pp{
            height: 50px;
        }
        .sj{
          float: right;  
        }
        .ly{
            float: left;
        }
        .sc{
            width: 50px;
            height: 25px;
            background-color: red;
            border: 0;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="da">
        <h2>发微博</h2>
        <span class="sjh">111</span><br>
        <textarea onfocus="f()" oninput="js()">共可输入100字</textarea>
        <p class="pp"><button class="fb" onclick="fb()">发布</button><span class="p">当前还可输入<span class="zs">100</span>个字</span></p>
        <ul>
            
        </ul>
    </div>
</body>
</html>
<script>
    var sjh=document.querySelector('.sjh')
    var text=document.querySelector('textarea')
    var ul=document.querySelector('ul')
    var zs=document.querySelector('.zs')
    var date=new Date()

    sjh.innerHTML=localStorage.getItem("sjh")
    function set(arr){
        localStorage.setItem("data",JSON.stringify(arr))
    }
    function get(){
        var data=localStorage.getItem('data')
        if(data!=null){
            return JSON.parse(data)
        }else{
            return []
        }
    }
    function fb(){
        var data=get()
        data.push({
            wb:text.value,
            sj:date.toLocaleString().replaceAll('/','-')
        })
        set(data)
        xr()
    }
    xr()
    function xr(){
        ul.innerHTML=''
        var data=get()
        for(i=0;i<data.length;i++){
            var li=document.createElement('li')
            li.innerHTML=`
            <li>
            <span class="ly">${data[i].wb}</span>
            <span class="sj">${data[i].sj}<button class="sc" onclick='sc(${i})'>删除</button></span>
            </li>
            `;
            ul.insertBefore(li,ul.children[0])
            text.value=''
            zs.innerHTML=100
        }
    }
    function f(){
        text.value=''
    }
    function js(){
        zs.innerHTML=100- text.value.length
    }
    function sc(i){
        var data=get()
        data.splice(i,1)
        set(data)
        xr()
    }
</script>